<template>
	<view class="container">
		<view class="back" v-if="type!='login'" @click="toLogin">
			<image src="/static/back.png" mode=""></image>
		</view>
		<view class="title">
			你好，</br>
			欢迎使用荣耀兔！
		</view>
		<view class="login" v-show="type=='login'">
			<uni-forms :modelValue="formData" label-width="0" ref="loginForm" >
				<uni-forms-item name="account">
					<input type="text" v-model="formData.account" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<input type="password" v-model="formData.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<button @click="login" class="login_btn">登录</button>
			<view class="forget_password">
				<text style="color: #FA2C1E;" @click="toRegister">注册</text> 
				<text style="margin: 0 10rpx;">|</text> 
				<text style="color: #797979;" @click="toResetPassword">忘记密码</text>
			</view>
		</view>
		<view class="login" v-show="type=='register'">
			<uni-forms :modelValue="registerFormData" label-width="0" ref="registerForm">
				<uni-forms-item name="parent">
					<input type="text" v-model="registerFormData.parent" placeholder="请输入推荐码*" />
				</uni-forms-item>
				<uni-forms-item name="mobile">
					<input type="text" v-model="registerFormData.mobile" placeholder="请输入手机号*" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<input type="password" v-model="registerFormData.password" placeholder="请输入密码*" />
				</uni-forms-item>
				<uni-forms-item name="code">
					<input type="text" v-model="registerFormData.code" placeholder="请输入验证码*" class="code">
						<!-- <view class="send_code" @click="sendCode('register',registerFormData.mobile)">
							发送验证码
						</view> -->
						<button class="send_code" @click="sendCode('register',registerFormData.mobile)" :disabled=" sendCodeRegisterTime> 0">{{sendCodeRegisterText}}</button>
					</input>
				</uni-forms-item>
			</uni-forms>
			<view class="agreement_view">
				<checkbox checked="true" class="agreement" >我已同意荣耀兔的<text style="color: #FA2C1E;" @click.stop.prevent="toAgreement(1)">《用户协议》</text>和<text style="color: #FA2C1E;" @click.stop.prevent="toAgreement(2)">《隐私政策》</text></checkbox>
			</view>
			<button @click="register" class="login_btn register_btn">注册</button>
		</view>
		<view class="login" v-show="type=='forgetPassword'">
			<uni-forms :modelValue="resetPwdFormData" label-width="0" ref="resetPwdForm">
				<uni-forms-item name="mobile">
					<input type="text" v-model="resetPwdFormData.mobile" placeholder="请输入手机号*" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<input type="password" v-model="resetPwdFormData.password" placeholder="请输入密码*" />
				</uni-forms-item>
				<uni-forms-item name="newpassword">
					<input type="password" v-model="resetPwdFormData.newpassword" placeholder="请再次输入密码*" />
				</uni-forms-item>
				<uni-forms-item name="captcha">
					<input type="text" v-model="resetPwdFormData.captcha" placeholder="请输入验证码*" class="code">
						<button class="send_code" @click="sendCode('resetpwd',resetPwdFormData.mobile)" :disabled="sendCodeResetpwdTime > 0">{{sendCodeResetpwdText}}</button>
					</input>
				</uni-forms-item>
			</uni-forms>
			<view class="agreement_view">
				<checkbox checked="true" class="agreement" >我已同意荣耀兔的<text style="color: #FA2C1E;" @click.stop.prevent="toAgreement(1)">《用户协议》</text>和<text style="color: #FA2C1E;" @click.stop.prevent="toAgreement(2)">《隐私政策》</text></checkbox>
			</view>
			<button @click="resetPwd" class="login_btn register_btn">确认修改</button>
		</view>
	</view>
</template>

<script>
	import {smsSend,register,login,resetpwd} from '../../api/api.js'
	export default {
		data() {
			return {
				sendCodeResetpwdTime:0,
				sendCodeRegisterTime:0,
				type:'login',
				formData:{
					account:'',
					password:''
				},
				registerFormData:{
					parent:'',
					mobile:'',
					password:'',
					code:''
				},
				resetPwdFormData:{
					mobile:'',
					password:'',
					newpassword:'',
					captcha:''
				},
				loginRules:{
					account:{
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						},{
							validateFunction:function(rule,value,data,callback){
								let reg = /^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/;
								if(!reg.test(value)){
									callback('请输入正确的11位手机号')
								}
								return true
							}
						}]
					},
					password:{
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						},{
							minLength: 6,
							errorMessage: '请输入6位长度及以上密码',
						}]
					}
				},
				registerRules:{
					parent:{
						rules: [{
							required: true,
							errorMessage: '请输入邀请码',
						}]
					},
					mobile:{
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						},{
							validateFunction:function(rule,value,data,callback){
								let reg = /^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/;
								if(!reg.test(value)){
									callback('请输入正确的11位手机号')
								}
								return true
							}
						}]
					},
					password:{
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						},{
							minLength: 6,
							errorMessage: '请输入6位长度及以上密码',
						}]
					},
					code:{
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}]
					},
				},
				resetPwdRules:{
					mobile:{
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						},{
							validateFunction:function(rule,value,data,callback){
								let reg = /^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/;
								if(!reg.test(value)){
									callback('请输入正确的11位手机号')
								}
								return true
							}
						}]
					},
					password:{
						rules: [{
							required: true,
							errorMessage: '请输入新密码',
						},{
							minLength: 6,
							errorMessage: '请输入6位长度及以上密码',
						}]
					},
					newpassword:{
						rules: [{
							required: true,
							errorMessage: '请再次输入新密码',
						},{
							minLength: 6,
							errorMessage: '请输入6位长度及以上密码',
						},{
							validateFunction:function(rule,value,data,callback){
								if(data.password != value){
									callback('两次密码不一致')
								}
								return true
							}
						}]
					},
					captcha:{
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}]
					},
				}
			}
		},
		onLoad(options){
			console.log("options:", options);
			if(options.orderId){
				uni.setStorageSync("shareOrderId",options.orderId)
			}
			// let token = uni.getStorageSync("token")
			// uni.showModal({
			// 	title: 'token',
			// 	content: 'token值：' + token,
			// 	success: function (res) {
			// 		if(uni.getStorageSync("token")){
			// 			uni.switchTab({url:'/pages/shop/index'})
			// 		}
			// 	}
			// });
			
			if(uni.getStorageSync("token")){
				uni.switchTab({url:'/pages/shop/index'})
			}
		},
		onReady(){
			this.$nextTick(() => {  
			    this.$refs.loginForm.setRules(this.loginRules);
				this.$refs.registerForm.setRules(this.registerRules);
				this.$refs.resetPwdForm.setRules(this.resetPwdRules);
			});  
		},
		computed:{
			sendCodeResetpwdText(){
				if(this.sendCodeResetpwdTime > 0){
					return '发送验证码('+this.sendCodeResetpwdTime+'s)'
				}else {
					return '发送验证码'
				}
			},
			sendCodeRegisterText(){
				if(this.sendCodeRegisterTime > 0){
					return '发送验证码('+this.sendCodeRegisterTime+'s)'
				}else {
					return '发送验证码'
				}
			}
		},
		methods: {
			toLogin(){
				this.type = 'login'
				this.$refs.registerForm.clearValidate()
				this.$refs.resetPwdForm.clearValidate()
				this.registerFormData ={
					parent:'',
					mobile:'',
					password:'',
					code:''
				}
				this.resetPwdFormData = {
					mobile:'',
					password:'',
					newpassword:'',
					captcha:''
				}
				this.formData = {
					account:'',
					password:''
				}
			},
			toRegister(){
				this.type = 'register'
			},
			toResetPassword(){
				this.type = 'forgetPassword'
			},
			sendCode(event,mobile){
				if(mobile && mobile != ''){
					let reg = /^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/;
					if(!reg.test(mobile)){
						uni.showToast({
							icon:'none',
							title: '请输入正确的11位手机号',
							duration: 2000
						});
					}else {
						let id
						if(event == 'register'){
							this.sendCodeRegisterTime = 60
							id = setInterval(()=>{
								if(this.sendCodeRegisterTime <= 0){
									clearInterval(id)
								}else [
									this.sendCodeRegisterTime = this.sendCodeRegisterTime - 1
								]
							},1000)
						}else if(event == 'resetpwd'){
							this.sendCodeResetpwdTime = 60
							id = setInterval(()=>{
								if(this.sendCodeResetpwdTime <= 0){
									clearInterval(id)
								}else [
									this.sendCodeResetpwdTime = this.sendCodeResetpwdTime - 1
								]
							},1000)
						}
						smsSend({event,mobile}).then(res=>{
							console.log(res)
						})
					}
				}else{
					uni.showToast({
						icon:'none',
						title: '请输入手机号',
						duration: 2000
					});
				}
			},
			login(){
				this.$refs.loginForm.validate().then(res=>{
					console.log('表单数据信息：', res);
					login(this.formData).then(res=>{
						if(res.data.code == 1){
							let {userinfo,shop_id} = res.data.data
							uni.setStorageSync("token",userinfo.token)
							uni.setStorageSync("shop_id",shop_id)
							uni.setStorageSync('userinfo', userinfo);
							uni.switchTab({url:'/pages/shop/index'})
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			resetPwd() {
				let that = this
				this.$refs.resetPwdForm.validate().then(res=>{
					console.log('表单数据信息：', res);
					let {mobile,newpassword,captcha} = this.resetPwdFormData
					resetpwd({mobile,newpassword,captcha} ).then(res=>{
						console.log(res)
						if(res.data.code == 1){
							uni.showModal({
								title: '',
								showCancel: false,
								content: res.data.msg,
								success: function (res) {
									that.toLogin()
								}
							});
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			register(){
				let that = this
				this.$refs.registerForm.validate().then(res=>{
					console.log('表单数据信息：', res);
					register(this.registerFormData).then(res=>{
						console.log(res)
						if(res.data.code == 1){
							uni.showModal({
								title: '',
								showCancel: false,
								content: '注册成功',
								success: function (res) {
									that.toLogin()
								}
							});
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			toAgreement(type){
				uni.navigateTo({
					url:'/pages/agreement/agreement?type=' + type
				})
			}
		}
	}
</script>

<style scoped>
	
	.container {
		background-image: url('/static/login.png');
		background-repeat: no-repeat;
		background-position: right top;
		background-size: 50vw auto;
		width: 100vw;
		height: 100vh;
		padding: 60rpx;
	}
	.title {
		font-size: 52rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 64rpx;
		margin-top: 188rpx;
	}
	input {
		border-bottom: 2rpx solid #EEEEEE;
		padding: 20rpx 0;
		height: 100rpx;
		font-size: 40rpx;
		font-weight: 500;
		line-height: 56rpx;
	}
	/deep/ uni-button[disabled]:not([type]), uni-button[disabled][type=default] {
	    color: #FFFFFF;
		opacity: 0.3;
	}
	/deep/ .uni-forms-item[] {
	    margin-bottom: 20rpx;
	}
	.back{
		position: absolute;
		top: 88rpx;
		left: 18rpx;
		padding: 20rpx;
	}
	.back image {
		width: 24rpx;
		height: 48rpx;
	}
	.login {
		margin-top: 100rpx;
	}
	.login_btn{
		margin-top: 80rpx;
		width: 100%;
		height: 108rpx;
		border-radius: 54rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		background: linear-gradient(90deg, #FF4050 0%, #FA2C1E 100%);
		/* background-color: red; */
	}
	.forget_password{
		font-size: 28rpx;
		line-height: 40rpx;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.code {
		position:relative;
		padding-right: 200rpx;
	}
	.send_code {
		position: absolute;
		right: -20rpx;
		top: 50%;
		transform: translateY(-50%);
		font-weight: 400;
		color: #FA2C1E;
		line-height: 40rpx;
		height: 100%;
		padding: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: none;
		background-color: transparent;
	}
	.send_code[disabled]:not([type]), .send_code[disabled][type=default]{
		color: #FA2C1E;
	    opacity: 0.5
	}
	
	.send_code[disabled]:not([type]), .send_code[disabled][type=default] {
	    color: rgba(0,0,0,.5);
	    background-color: transparent;
	}
	.send_code::after {
		content: none;
	}
	/deep/ uni-checkbox .uni-checkbox-input {
		border-radius:50% !important;
	}
	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background-color: #FA2C1E;
		color: #fff !important;
		border: 2rpx solid #FA2C1E;
	}
	/deep/ uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
	    border-color: #d1d1d1;
	}
	/deep/ checkbox .wx-checkbox-input {
		border-radius:50% !important;
		transform: scale(.8);
	}
	/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	  background-color: #FA2C1E;
	  color: #fff !important;
	  border: 2rpx solid #FA2C1E;
	}
	.agreement {
		font-size: 22rpx;
	}
	.register_btn {
		margin-top: 48rpx;
	}
</style>
